<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
    class="w100p h100p"
    ref="contrast"
  ></div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    CID: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      perNum: [
        {
          value: 0
        },
        {
          value: 0
        },
        {
          value: 0
        },
        {
          value: 0
        },
        {
          value: 0
        },
        {
          value: 0
        }
      ],
      perType: ["租户", "住户", "服务人员", "从业人员", "访客", "陌生人"]
    };
  },
  methods: {
    getData() {
      var param = {
        CID: this.CID
      };
      var params = JSON.stringify(param);
      this.loading = true;
      this.$api.home
        .day_type(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            var dataList = res.data.list;
            this.perType = res.data.names;
            this.perNum = [];
            this.perNum = dataList.map((ele, index) => {
              return {
                value: ele.value
              };
            });
          } else {
            return false;
          }
          this.echarth();
        })
        .catch((err) => {
          this.loading = false;
          // this.$message.error("服务器连接失败，请稍后再试" + err);
          this.echarth();
        });
    },
    echarth() {
      let myChart = this.$echarts.init(this.$refs.contrast);

      let option = {
        yAxis: {
          type: "category",
          axisLine: {
            show: false //坐标线
          },
          axisTick: {
            show: false //小横线
          },
          axisLabel: {
            color: "#93ceff" //坐标轴字颜色
          },
          data: this.perType
        },

        xAxis: {
          show: false
        },
        grid: {
          top: "40",
          right: "50",
          left: "80",
          bottom: "40" //图表尺寸大小
        },
        // animationDuration: function (idx) {
        //                 // 越往后的数据时长越大
        //                 return idx * 9000;
        //             },
        animationDuration: 9000,
        series: [
          {
            /* data: [120, 200, 150, 80, 70, 110, 130], */
            type: "bar",
            barWidth: "10px",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(255, 255, 255, 0.1)",
              barBorderRadius: [30, 30, 30, 30] //圆角大小
            },
            label: {
              show: true,
              position: "right", //每一条的数据位置
              formatter: "{c}次"
            },
            itemStyle: {
              normal: {
                color: (params) => {
                  let colors = ["#5c66ff", "#439bff", "#47daff", "#53f4ff", "#1dcaff", "#52f1ba"];
                  return colors[params.dataIndex];
                }, //每个数据的颜色
                barBorderRadius: [30, 30, 30, 30], //圆角大小
                shadowBlur: 10,
                shadowColor: "rgba(0, 103, 255, 0.2)",
                shadowOffsetX: -5,
                shadowOffsetY: 5
              }
            },
            data: this.perNum
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  },
  mounted() {
    this.getData();

    this.resizefun = () => {
      this.$echarts.init(this.$refs.contrast).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  }
};
</script>

<style>
</style>